<template>
  <div class="v-alert">
    <div class="v-mask"></div>
    <div class="v-dialog">
      <div class="v-d-h">{{data.title}}</div>
      <div class="v-d-b">{{data.content}}</div>
      <div @click="_hide" class="v-d-f border1PxTop">确定</div>
    </div>
  </div>
</template>
<style>
.v-alert {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.v-dialog {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 300px;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  z-index: 300;
}
.v-d-h {
  height: 80px;
  line-height: 100px;
  font-size: 32px;
  text-align: center;
}
.v-d-b {
  height: 140px;
  box-sizing: border-box;
  padding: 30px 50px;
  text-align: justify;
  line-height: 35px;
  font-size: 28px;
}
.v-d-f {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  text-align: center;
  letter-spacing: 3px;
  color: #00a5e0;
  border-style: solid;
  border-color: #d5d5d6;
  border-width: 0;
}
.v-mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
}
</style>
<script>
export default {
  props: ["data"],
  mounted() {
    window.stopTouchMove = function(e) {
      e.preventDefault();
    };

    console.log(this.data);

    document.addEventListener("touchmove", window.stopTouchMove, false);
  },
  methods: {
    _hide() {
      document.removeEventListener("touchmove", window.stopTouchMove, false);
      this.$emit("alertFn");
      this.$parent.alertFlag = false;
    }
  }
};
</script>
